<template>
	<view class="container">
		<view class="redPack_back">
			<image src="/static/banner2.png"></image>
		</view>
		<view class="redpack_time" v-if="coupondata!=null">
			<text>下一轮抢包时段</text>
			<text>{{time}}</text>
		</view>
		<!-- start  是否开始 -->
		<view class="nored" v-if="coupondata==null">
			<image src="/static/red_icon.png"></image>
			<text>本店还没有红包可抢哦</text>
		</view>
		<view class="outof outof_hover" v-else>正在开抢</view>
		<!-- end  是否开始 -->
		<view class="redpack_content">
			<image :src="url+'/static/imgs/red.png'" @click="receiveCouponTap(coupondata.id)" class="red_images" v-if="coupondata!=null"></image>
			<!-- <view class="redpacktest">限量500份，抢完即止</view> -->
		</view>
		<view v-if="ishide">
			<view v-if="state==1">
				<!--start 开红包  独家红包    现金红包 -->
				<view class="<strong>redEnvelopes</strong>" catchtouchmove="preventTouchMove" v-if="typemoney.type==2||typemoney.type==3">
					<image :src="url+'/static/imgs/redEnvelopes.png'" class="red_img"></image>
					<view class="redEnvelopesContent">
						<view class="redenvel_radius">
							<text class="redenvel_font">6元</text>
							<text>现金红包</text>
						</view>
						<view class="redenvel_msg">正在发送到您的微信零钱里预计3天内到账</view>
						<view class="redenvel_gognxi">恭喜您 抢到一个现金红包~</view>
						<view class="redbutton">知道了</view>
					</view>
					<image :src="url+'../../../static/imgs/close.png'" class="close"></image>
				</view>
				<!--end 开红包 -->

				<!-- start 开红包 优惠卷 -->
				<view class="redEnvelopes" catchtouchmove="preventTouchMove" v-if="typemoney.type==1">
					<image :src="url+'/static/imgs/coupon.png'" class="coupon_img"></image>
					<view class="coupon_content">
						<view class="coupon_gogx">恭喜你！抢到一个优惠券~</view>
						<view class="coupon_msg">{{coupondata.name}}优惠券</view>
						<view class="coupon_text">已发放到您的账户里</view>
						<view class="coupon_button" @click="categoryTap">立即使用</view>
					</view>
					<image :src="url+'../../../static/imgs/close.png'" class="close"></image>
				</view>
				<!-- end 开红包 -->
			</view>
			<!-- start  没有抢到红包 -->
			<view class="redEnvelopes" v-else>
				<image :src="url+'/static/imgs/notsnatch.png'" class="notsnatch_back"></image>
				<view class="notsnatch_content">
					<view class="notsnatch_title">很遗憾~您没有抢到红包 请等下一轮再接再厉！</view>
					<image :src="url+'/static/imgs/kulian.png'" class="kulain"></image>
					<view class="notsnatchbutton">
						<image :src="url+'/static/imgs/button.png'"></image>
						<view @click="onIshideTap">知道了</view>
					</view>
				</view>
			</view>
			<!-- end  没有抢到红包 -->

		</view>
	</view>
</template>

<script>
	var app = getApp();
	import http from "@/common/js/request.js"
	export default {
		data() {
			return {
				url: app.globalData.baseImgUrl,
				time: "",
				coupondata: "",
				typemoney: "",
				ishide: false,
				state: ""
			}
		},
		onLoad() {
			this.getNextCouponInfo();
			this.couponDetail();
		},
		methods: {
			onIshideTap() {
				
				this.ishide =false
				console.log(this.ishide)
			},
			//获取下一场红包
			getNextCouponInfo() {
				var that = this;
				http.post("/api/v1/coupon/get_next_coupon", {
					store_id: app.globalData.storeId
				}, function(res) {
					console.log(res);
					that.time = res.datas;
				})
			},
			//获取待领取红包   //判断  是正在开抢  还是  未开始
			couponDetail() {
				var that = this;
				http.post("/api/v1/coupon/coupon_detail", {
					store_id: app.globalData.storeId
				}, function(res) {
					console.log(res);
					that.coupondata = res.datas
				})
			},

			receiveCouponTap(id) {
				var that = this;
				uni.showLoading()
			//	console.log(id, app.globalData.couponid)
				if (id != app.globalData.couponid) {
					http.post("/api/v1/coupon/receive_coupon", {
						coupon_id: id,
						store_id: app.globalData.storeId
					}, function(res) {
						console.log(res);
						uni.hideLoading()
						that.ishide = true;
						that.state = res.state;
						if (res.state == 1) {
							that.typemoney = res.datas;
						}
					})

				} else {
					//console.log("已经抢了")
					uni.showToast({
						title: "红包已经抢过了哦！",
						icon: "none"
					})
				}
				app.globalData.couponid = that.coupondata.id;
			},
			//优惠券立即使用
			categoryTap() {
				uni.switchTab({
					url: '/pages/store/category/category'
				})
			},
		}
	}
</script>

<style>
	.nored{
		margin-top: 176rpx;
	}
	.nored image{
		width: 513rpx;
		height: 292rpx;
		display: block;
		margin: 0 auto;
	}
	.nored text{
		display: block;
		text-align: center;
		font-size: 28rpx;
		color: #999999;
		margin-top: 140rpx;
	}
	.redEnvelopes {
		background: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.redEnvelopes .red_img {
		width: 716rpx;
		height: 775rpx;
		margin-top: 141rpx;
	}

	.redEnvelopesContent {
		width: 716rpx;
		height: 775rpx;
		position: absolute;
		top: 141rpx;
		left: 20rpx;


	}

	.redPack_back {
		width: 750rpx;
		height: 285rpx;
	}

	.redPack_back image {
		width: 100%;
		height: 100%;
	}

	.redpack_time {
		height: 106rpx;
		line-height: 106rpx;
		border-bottom: 1px solid rgba(240, 240, 240, 1);
		;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.redpack_time text {
		font-size: 30rpx;
		color: #5A5A5A;
	}

	.redpack_time text:nth-child(2) {
		color: #E44224;
	}

	.outof {
		width: 400rpx;
		height: 98rpx;
		background: rgba(240, 240, 240, 1);
		border-radius: 10rpx;
		margin: 46rpx auto 0;
		font-size: 30rpx;
		color: #979595;
		text-align: center;
		line-height: 98rpx;
	}

	.red_images {
		width: 100%;
		height: 100%;
	}

	.redpacktest {
		color: #B7B7B7;
		font-size: 28rpx;
		position: absolute;
		bottom: 40rpx;
		text-align: center;
		width: 100%;
		left: 0;


	}

	.redpack_content {
		width: 720rpx;
		height: 686rpx;
		margin: 0 auto;
		position: relative;
	}

	.outof_hover {
		color: #fff;
		font-size: 30rpx;
		background: #FF9D11;
	}

	.close {
		width: 72rpx !important;
		height: 72rpx !important;
		margin: 40rpx auto !important;
		display: block;
	}

	.redenvel_radius {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin: 266rpx auto 0rpx;
	}

	.redenvel_radius text {
		display: block;
		text-align: center;
		color: #EF3619;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 60rpx;

	}

	.redenvel_font {
		font-size: 48rpx !important;
		margin-top: 26rpx;
	}

	.redenvel_msg {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 44rpx;
		width: 310rpx;
		margin: 10rpx auto 0;
		text-align: center;
	}

	.redenvel_gognxi {
		font-size: 36rpx;
		line-height: 48rpx;
		width: 312rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin: 10rpx auto 0;
	}

	.redbutton {
		width: 380rpx;
		height: 52rpx;
		line-height: 52rpx;
		background: rgba(255, 188, 80, 1);
		border-radius: 13rpx;
		text-align: center;
		color: #E82A0E;
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx auto 0;
	}

	.coupon_img {
		width: 621rpx;
		height: 615rpx;
		display: block;
		margin: 200rpx auto 0;
	}

	.coupon_content {
		width: 621rpx;
		height: 615rpx;
		position: absolute;
		top: 200rpx;
		left: 50%;
		margin-left: -311rpx;
	}

	.coupon_gogx {
		font-size: 32rpx;
		color: #D78D3B;
		font-weight: bold;
		text-align: center;
		margin-top: 100rpx;
	}

	.coupon_msg {
		font-size: 50rpx;
		color: #FF595A;
		text-align: center;
		height: 161rpx;
		line-height: 161rpx;
		font-weight: bold;
	}

	.coupon_text {
		font-size: 28rpx;
		color: #FF595A;
		text-align: center;
	}

	.coupon_button {
		width: 438rpx;
		height: 92rpx;
		background: linear-gradient(0deg, rgba(255, 234, 68, 1), rgba(255, 174, 0, 1));
		box-shadow: 0px 6rpx 24rpx 0rpx rgba(184, 11, 12, 0.44);
		margin: 140rpx auto 0;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #8D4F0A;
		line-height: 92rpx;
		text-align: center;
	}

	.notsnatch_back {
		width: 534rpx;
		height: 610rpx;
		margin: 200rpx auto 0;
		display: block;
	}

	.notsnatch_content {
		width: 534rpx;
		height: 610rpx;
		position: absolute;
		top: 200rpx;
		left: 50%;
		margin-left: -266rpx;

	}

	.notsnatch_title {
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		font-weight: bold;
		width: 384rpx;
		line-height: 60rpx;
		margin: 60rpx auto 0;
	}

	.kulain {
		width: 246rpx;
		height: 246rpx;
		display: block;
		margin: 50rpx auto 0;
	}

	.notsnatchbutton {
		width: 311rpx;
		height: 99rpx;
		text-align: center;
		line-height: 99rpx;
		font-size: 30rpx;
		margin: 20rpx auto 0;
		position: relative;
	}

	.notsnatchbutton image {
		width: 100%;
		height: 100%;
	}

	.notsnatchbutton view {
		width: 311rpx;
		height: 99rpx;
		position: absolute;
		top: 0;
		left: 0;
		color: #fff;
	}
</style>
